<template>
  <div class="home-hot">
    <div class="hot-top">
      <div class="film"></div>
      <div class="hot-top-content">
        <div class="img"></div>
        <div class="date-updated">更新日期：{{ hotData.trackUpdateTime |  dateUpdated}}</div>
      </div>
    </div>
    <SongListItem
      v-for="(item) in hotData.tracks"
      :key="item.id"
      :item="item"
      @click.native="$emit('update:currentSong', item)"
      :currentSong="currentSong"
      :playing="playing"
    ></SongListItem>
  </div>
</template>

<script>
import SongListItem from "../components/SongListItem.vue";
export default {
  components: { SongListItem },
  props:{
    currentSong:[Object,null],
    playing:Boolean
  },
  data() {
    return {
      hotData: {},
    };
  },
  created: function () {
    this.axios
      .get("https://apis.netstart.cn/music/playlist/detail?id=3778678")
      .then((res) => {
        this.hotData = res.data.playlist;
        console.log(this.hotData.tracks);
      });
  },
  filters: {
    dateUpdated:function(val){
      var mydate = new Date(val)
      var month = mydate.getMonth()+1; 
       var date = mydate.getDate();
       month = month >= 10 ? month : "0"+month ;
       date = date >= 10 ? date : "0"+date ;
      return month + "月" + date + "日"
    }
  }
};
</script>

<style lang="less">
.home-hot {
  .hot-top {
    position: relative;
    height: 153px;
    background-image: url("@/assets/hot_music_bg_2x.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    .film {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.2);
    }
    .hot-top-content {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      padding: 20px;
      .img {
        width: 142px;
        height: 67px;
        background-image: url("@/assets/index_icon_2x.png");
        background-repeat: no-repeat;
        background-position: -24px -30px;
        background-size: 166px 97px;
        position: relative;
        overflow: hidden;
      }
      .date-updated {
        font-size: 12px;
        margin-top: 10px;
        color: hsla(0, 0%, 100%, 0.8);
      }
    }
  }
}
</style>